<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>小说免费阅读</title>
    <link rel="stylesheet" href="/res/css/share.css">
    <link rel="stylesheet" href="/res/css/browse.css">
</head>
<body>
<div id="browse">
    <input type="hidden" th:value="${id}"/>
    <!--顶部-->
    <div class="top">
        <div class="head">
            <img src="/res/img/logo.png" @click="goHome" alt="">
            <div class="head_txt">
                {{ book.bookName }}
                <span v-if="chapter > 0">第{{ chapter }}章</span>
                免费阅读
            </div>
        </div>
    </div>

    <!--内容-->
    <div class="content">
        <div class="left">
            <div class="left_top">
                <div class="directory">
                    目录
                </div>
                <div class="directory_c">
                    <!-- <input type="text" class="c_txt" /> -->
                    <span v-if="chapter > 0">{{ chapter }}</span>
                    <span v-if="chapter === 0">引子</span>
                    <span v-if="chapter === -1">介绍</span>
                    /
                    <a id="max">{{ book.chapters - 1 }}</a>
                    <img src="/res/img/搜索.png" alt="">
                </div>
            </div>
            <div class="t">
                <ul>
                    <li>
                        <a id="intro" href="#" class="link" @click.prevent="setChapter(-1)">介绍</a>
                    </li>
                    <li v-if="book.chapters === 0">
                        <a :href="'https://www.baidu.com/s?ie=utf-8&rsv_dp=1&rsv_idx=1&tn=baidu&wd=' + book.title"
                           class="link">更多>></a>
                    </li>
                    <li v-for="(number, index) of book.chapters" :key="index">
                        <a href="#" class="link" @click.prevent="setChapter(0)" v-if="index === 0">引子</a>
                        <a href="#" class="link" @click.prevent="setChapter(number - 1)" v-else>第{{ index }}章</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right">
            <div class="right_con">
                <div class="right_con_con" v-if="chapter !== -1">
                    <div class="chapter">{{ content.title }}</div>
                    <div style="height: 30px"></div>
                    <div v-for="(line, index) in content.lines" :key="index" class="content">
                        &nbsp;&nbsp;{{ line }}
                        <div style="height: 10px"></div>
                    </div>
                    <div class="right_bottom">
                        <a href="#" v-if="content.hasNextChapter"
                           @click.prevent="setChapter(chapter + 1)">下一章</a>
                        <div style="width: 25%;float: right; color: red" v-else>
                            <span>本书完</span><a href="#" @click.exact="goHome">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="right_con_con" v-else>
                    <div class="right_con2">
                        <div class="message">
                            <div class="message_txt">
                                内容简介:
                            </div>
                            <div v-if="book.intro !== ''">
                                {{ book.intro }}
                            </div>
                            <div v-else>暂无介绍
                                <a style='color: brown' :href="'https://baike.baidu.com/item/' + book.title"
                                   target='_blank'>
                                    更多介绍>></a>
                            </div>
                        </div>
                        <div class="message_right">
                            <img :src="'/res/'+book.cover" alt="">
                            <div class="message_con">今日热度:
                                <b style="color: red">{{ book.hot }}</b>
                            </div>
                        </div>
                    </div>
                    <div class="ooo">章节目录：</div>
                    <div class="chapter_table">
                        <div v-for="(number, index) of book.chapters" :key="index">
                            <button type="button" class="c_btn" @click="setChapter(0)"
                                    v-if="number - 1 === 0">引子
                            </button>
                            <button type="button" class="c_btn" @click="setChapter(number - 1)" v-else>
                                第{{ index }}章
                            </button>
                        </div>
                    </div>
                    <div class='ooo_d' style='margin-top: 20px'>更多章节>>
                        <a style='color: brown'
                           :href="'https://www.baidu.com/s?ie=utf-8&rsv_dp=1&rsv_idx=1&tn=baidu&wd=' + book.title"
                           target='_blank'>点击查看</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--底部-->
    <div class="bottom">
        <div class="copyright">
            <a href="#"> 版权所有©支持盗版 </a>
        </div>
    </div>
</div>
<script src="/res/js/vue.js"></script>
<script src="/res/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#browse',
        data: {
            // localhost: "[[${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #httpServletRequest.getServerPort()}]]",

            book: {intro: "", cover: "", hot: "", chapters: "", title: "", author: ""},
            chapter: -1,
            content: {title: "", lines: [], hasNextChapter: ""}
        },
        methods: {
            goHome() {
                location.href = "/"
            },
            setChapter(value) {
                let oldV = document.getElementsByClassName('link')[this.chapter + 1]
                oldV.style.color = 'black'
                oldV.innerText = oldV.innerText.replace(">>", "")
                this.chapter = value
                let newV = document.getElementsByClassName('link')[value + 1]
                newV.style.color = 'red'
                newV.innerText = newV.innerText + ">>"
                // location.href = "a" + (value + 1)
            }
        },
        watch: {
            chapter: {
                immediate: true,
                handler() {
                    if (this.chapter !== -1) {
                        axios.get("/book/chapter/" + this.chapter)
                            .then(resp => {
                                if (resp.data.code === 0) {
                                    this.content = resp.data.data
                                }
                            }).catch(err => console.log(err));
                        document.getElementsByClassName('right_con')[0].scrollTo(0, 0)
                    }
                }
            }
        },
        mounted() {
            axios.get("/book/" + '[[${id}]]').then(resp => {
                if (resp.data.code === 0) {
                    this.book = resp.data.data
                } else {
                    location.href = "/"
                }
            }).catch(err => console.log(err));

            document.getElementById("intro").style.color="red"
            document.getElementById("intro").innerText = document.getElementById("intro").innerText+ ">>"
        }
    })
</script>
</body>
</html>